<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>
<!--z-index 设置层级顺序-->
<!--height: 400px;width:500px;top: 50%;left: 50%;margin-top: -200px;margin-left: -250px; 设置白色框定位在中间位置；此时使用让div居中的方法不生效了-->
<!--opacity 设置透明度-->

    <div style="z-index:10;position:fixed;height: 400px;width:500px;top: 50%;left: 50%;margin-top: -200px;margin-left: -250px;background-color: white">
        <input type="text">
    </div>

    <!--遮罩层-->
    <div style="z-index:5;position:fixed;background-color: black;top: 0;bottom: 0;right: 0;left: 0;opacity: 0.5;"></div>

    <div style="height: 2000px;background-color: aquamarine">11111111111</div>



</body>
</html>